@import 'common.sass'

.anchor
    position: relative
    top: vw(-260)
    display: block
    height: 0
    overflow: hidden

.five-project-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .title-box
        width: auto
        height: auto
        display: flex
        flex-direction: column
        align-items: center

        .english
            font-size: vw(18)
            color: $content_color

        .chinese
            font-size: vw(32)
            display: flex
            align-items: center
            color: $title_color

    .content-box
        width: vw(734)
        height: vw(120)
        background-color: white
        display: flex
        justify-content: space-between
        align-items: center
        z-index: 999

        .element
            width: vw(140)
            height: vw(70)
            border: vw(1) solid $brand_main_color
            border-radius: vw(20)
            color: $title_color
            display: flex
            flex-direction: column
            justify-content: center
            align-items: center
            font-size: vw(24)

        .active
            background-color: $brand_main_color
            color: white

#scs-container, #ecm-container, #dcr-container, #dcs-container, #spr-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .title-box
        width: auto
        height: auto
        display: flex
        flex-direction: column
        align-items: center

        .main
            font-size: vw(28)
            display: flex
            align-items: center
            color: $title_color

        .sub
            font-size: vw(24)
            color: $content_color

    .swiper-wrapper
        width: vw(750)
        height: auto

        .swiper-slide
            width: vw(750)
            height: auto
            display: flex
            justify-content: center

            .content-box
                width: vw(700)
                height: vw(444)
                display: flex
                flex-direction: column
                justify-content: space-between
                align-items: center
                color: white

                .line
                    width: vw(700)
                    height: vw(444)
                    display: flex
                    justify-content: space-between
                    text-align: center

                    .element
                        width: vw(340)
                        height: vw(207)
                        border-radius: vw(20)

                        .img
                            width: vw(340)
                            height: vw(207)

.pagination-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .swiper-pagination-bullet
        width: vw(12)
        height: vw(12)
        border-radius: vw(12)
        margin: 0 vw(4)
        background-color: $brand_main_color